<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet/less" href="../common.less"><!--公共样式，清除样式 -->
  <link rel="stylesheet/less" href="./index.less" /><!--独自样式 -->
  <script src="../assets/less-4.1.3.js"></script>
  <title>产品中心</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="../assets/logo.png" alt="Logo" class="d-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="../index.html">首页</a>
            <a class="nav-link " href="../about">关于我们</a>
            <a class="nav-link active" href="../product">产品中心</a>
            <a class="nav-link" href="../appointment">预约设计</a>
            <a class="nav-link" href="../news">新闻资讯</a>
            <a class="nav-link" href="../service">服务平台</a>
            <a class="nav-link" href="../contact">联系我们</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div class="banner">
    <img src="./images/banner.png" class="d-block w-100" alt="...">
  </div>

  <!-- URBAN CHIC -->
  <div class="urban_chic">
    <div class="head">
      <h1 class="text-center">URBAN CHIC</h1>
      <span>现代都市</span>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-5 pic mx-auto">
          <img src="./images/urban_chic1.png" class="d-block w-100" alt="...">
          <h6 class="text-center">清风物语</h6>
        </div>
        <div class="col-sm-4 col-5 pic mx-auto">
          <img src="./images/urban_chic2.png" class="d-block w-100" alt="...">
          <h6 class="text-center">落落星辰</h6>
        </div>
        <div class="col-sm-3 col-5 pic mx-auto">
          <img src="./images/urban_chic3.png" class="d-block w-100" alt="...">
          <h6 class="text-center">折叠城市</h6>
        </div>
      </div>
    </div>
  </div>

  <!-- SPARKLING CITY -->
  <div class="sparkling_city">
    <div class="head">
      <h1 class="text-center">SPARKLING CITY</h1>
      <span>现代都市</span>
    </div>
    <img src="./images/sparkling_city1.png" class="d-block w-100" alt="...">

    <div class="container">
      <div class="content row">
        <div class="left col-md-7">
          <img src="./images/sparkling_city2.png" class="d-block w-100" alt="...">
        </div>
        <div class="right col-md-5">
          <p>习惯了快节奏的工作<br>
            也习惯在每个夜晚仰星空聆听内心的独白<br>
            成长是尘埃落定后内心的笃定<br>
            独立是璀璨星光下时空的静谧<br>
            暂时抛开钢筋水泥的繁华意向<br>
            内心的柔软角落直指远方</p>
          <div class="img">
            <img class="img-fluid" src="./images/sparkling_city3.png" alt="">
          </div>
        </div>
      </div>
      <div class="content2 row">
        <div class="col-xl-5 left">
          <div class="pic justify-content-center justify-content-sm-between">
            <img src="./images/sparkling_city4.png" alt="">
            <img class="d-none d-sm-block" src="./images/sparkling_city5.png" alt="">
          </div>
          <p class="text-center text-xl-end">
            一直在寻找这样的地方<br>
            一个可以孕育出无数故事与想象的空间美得心照不宣<br>
            把我的故事，静静说给你听<br>
            于是我们终于拥有了细水长流的感动
          </p>
          <span class="btn">了解更多</span>
        </div>
        <div class="col-xl-7">
          <img src="./images/sparkling_city6.png" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
  </div>

  <!-- MAPLE WHISPER -->
  <div class="maple_whisper">
    <div class="head">
      <h1 class="text-center">MAPLE WHISPER</h1>
      <span>清风物语</span>
    </div>
    <img src="./images/maple_whisper1.png" class="d-block w-100" alt="...">
    <div class="container">
      <div class="content row">
        <div class="col-md-5 left text-center text-md-start">
          <p>
            <span>让家 更为美好：</span>
            生活里，家就是一个简单的单位。<br>
            一个个家就是一个个温暖的花园<br>
            多姿多彩的生活，许许多多的光彩，<br>
            家就是人生的花香满园，有人生的春色迷人，<br>
            夏日的茂盛，秋季的浪漫。冬天的暖阳。
          </p>
          <img src="./images/maple_whisper2.png" class="d-block w-100" alt="...">
          <span class="btn mb-4 mb-md-0">了解更多</span>
        </div>
        <div class="col-md-7 right d-flex align-items-center">
          <img src="./images/maple_whisper3.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <div class="content2 row">
        <div class="col-md-4 col-8 mx-auto mb-4 mb-md-0">
          <img src="./images/maple_whisper4.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-4 col-8 mx-auto mb-4 mb-md-0">
          <img src="./images/maple_whisper5.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-4 col-8 mx-auto mb-4 mb-md-0">
          <img src="./images/maple_whisper6.png" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
  </div>

  <!-- FOLDING CITY -->
  <div class="folding_city">
    <div class="head">
      <h1 class="text-center">FOLDING CITY</h1>
      <span>折叠城市</span>
    </div>
    <img src="./images/folding_city1.png" class="d-block w-100" alt="...">
    <div class="container">
      <div class="content row">
        <div class="col-md-5 left text-center text-md-start">
          <p>
            <span>简约家具解读：</span>
            设计简约，布置灵活，实用不浮夸<br>
            在忙碌的生活里，我们需要一个随性的家<br>
            尽情释放心中的浮躁与疲惫<br>
            聆听自己的心意
          </p>
          <img src="./images/folding_city2.png" class="d-block w-100" alt="...">
          <span class="btn mb-4 mb-md-0">了解更多</span>
        </div>
        <div class="col-md-7 right d-flex align-items-center">
          <img src="./images/folding_city3.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <div class="content2 row">
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city4.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city5.png" class="d-block w-100 h-100" alt="...">
        </div>
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city6.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city7.png" class="d-block w-100" alt="...">
        </div>
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city8.png" class="d-block w-100 h-100" alt="...">
        </div>
        <div class="col-md-4 col-sm-6 col-8 mx-auto mb-4 mb-sm-0">
          <img src="./images/folding_city9.png" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="container top">
      <div class="row">
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">关于我们</span>
          <a href="#">公司简介</a>
          <a href="#">文化产品</a>
          <a href="#">发展历程</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">产品中心</span>
          <a href="#">现代都市</a>
          <a href="#">折叠城市</a>
          <a href="#">清风物语</a>
          <a href="#">落落星辰</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">预约设计</span>
          <a href="#">精牌设计</a>
          <a href="#">设计申请</a>
          <a href="#">客服案例</a>
          <a href="#"></a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">新闻资讯</span>
          <a href="#">品牌咨询</a>
          <a href="#">热门观点</a>
          <a href="#">家居动态</a>
          <a href="#">精彩视频</a>
        </div>
        <div class="item col-xl-1 col-lg-4 col-md-4 col-sm-4 col-6 text-xl-start text-center mx-auto">
          <span class="title">服务平台</span>
          <a href="#">理念服务</a>
          <a href="#">服务支持</a>
          <a href="#">服务承诺</a>
          <a href="#">在线保修</a>
        </div>
        <div class="right col-xl-4 col-lg-4 col-md-4 col-sm-4 col-6   mx-auto">
          <span class="title">联系我们</span>
          <div class="info">
            <div class="item">
              <img src="../assets/footer_icon1.png" alt="">
              <span>河南省-郑州高新区-万仙山-万仙洞</span>
            </div>
            <div class="item">
              <img src="../assets/footer_icon2.png" alt="">
              <span>110-123456789</span>
            </div>
            <div class="item">
              <img src="../assets/footer_icon3.png" alt="">
              <span>www.110.com</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="container bottom">
      <div class="row">
        <div class="left col-lg-8 text-center text-lg-start">
          © 2017姿在家家居用品股份有限公司版权所有法 律 声 明 及 隐 私 权 政 策 · 知 识 产 权新ICP备 05003
        </div>
        <div class="right col-lg-4 text-center text-lg-start">
          <span>友情链接：</span><img src="../assets/footer_icons.png" alt="">
        </div>
      </div>
    </div>
  </footer>
  <script src="../bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>